<!--
 * @Author: your name
 * @Date: 2020-04-29 16:35:52
 * @LastEditTime: 2020-05-12 13:53:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \v1.0.0\pages\work\form_test\form_test.vue
 -->

<template>
    <view>
        <template v-for="(item,index) in jsonData_" >
            <component :is="'kmlc-form-'+item.type" :label="item.label" :key="index" :em-data="item"  v-model="item.value" @onChangeVal="onChangeVal($event,index)"></component>
        </template>

		<!-- <view>==========================================</view>
        <kmlc-form-select :label="jsonData_[0].label" :options="jsonData_[0].options" :readonly="true"></kmlc-form-select>
		<kmlc-form-date :label="jsonData_[1].label" :options="jsonData_[1].options"></kmlc-form-date> -->
		<tui-button @click="onSubmit">提交</tui-button>
		<tui-button @click="onReset">重置</tui-button>
    </view>
</template>

<script>
import {jsonData} from './jsonData.js';
const form = require("@/common/framework/libs/formValidation.js")
export default {
    data(){
        return {
            jsonData_:{},
			formData:{},
			types:[{
			    type:'string',
			    defaultVal:''
			},{
			    type:'number',
			    defaultVal:0
			},{
			    type:'array',
			    defaultVal:[]
			},{
			    type:'object',
			    defaultVal:{}
			},{
				type:'boolean,',
				defaultVal:false
			}]
        }
    },
    created() {
       
        this.jsonData_ = jsonData && jsonData.list;
		 console.log(jsonData);
    },
    methods: {
        onChangeVal(e,index){
            console.log('formPage:',e,index);
			let {key} = this.jsonData_[index];
			this.formData[key] = e.value;
			
			this.jsonData_[index].options.defaultValue = e;
        },
		onSubmit(){
		    //获取默认值，添加到表单数据里
		    //构造验证结构
		    let rules = this.jsonData_.map(item=>{
		        let {rules,key} = item;
		        if(!this.formData[key]){
		            this.formData[key] = item.options.defaultValue;
		        }
		        return {
		            name:item.key,
		            rule:rules.map(item=>{
		                if('required' in item){
		                    return item.required?'required':'';
		                }else{
		                   return item.pattern;
		                }
		            }),
		            msg:rules.map(item=>item.message)
		        };
		    });
		    console.log('this.formData:',this.formData);
		    let checkRes = form.validation(this.formData, rules);
			if (!checkRes) {
		        console.log('checkRes:',checkRes);
				uni.showToast({
					title: "验证通过!",
					icon: "none"
				});
			} else {
				uni.showToast({
					title: checkRes,
					icon: "none"
				});
			}
		},
		 // 清空表单
		onReset(){
		    let changeData =this.jsonData_.map(item=>{
		        switch (typeof item.options.defaultValue) {
		        	case 'string':
		        		item.options.defaultValue = '';
		        		break;
		        	case 'number':
		        		item.options.defaultValue = 0;
		        		break;
		        	case 'array':
		        		item.options.defaultValue = [];
		        		break;
		        	case 'object':
		        		item.options.defaultValue = {};
		        		break;
					case 'boolean':
						item.options.defaultValue = false;
						break;
		        };
		        return item;
		    });
			this.jsonData_ = JSON.parse(JSON.stringify(changeData)); //重置数据，改变json地址，watch监听
		    console.log(this.jsonData_);
		    // this.jsonData_ = changeData; //触发变更
		}
    },
}
</script>